<template>
    <div class='container'>
        <div class="left-pannel">
            <div class="create">
                <t-button class="create-btn">创建对话</t-button>
            </div>

            <div class="search">
                <t-input placeholder="搜索对话" />
            </div>
            <div class="list">
                <t-list>
                    <t-list-item>
                        <t-list-item-meta description="列表内容列表内容1" />
                        <template #action>
                            <t-dropdown :options="options">
                                <template #suffix="{ item }">
                                    <t-icon :name="item.icon" />

                                </template>
                                <div>···</div>

                            </t-dropdown>
                        </template>

                    </t-list-item>
                    <t-list-item>
                        <t-list-item-meta description="列表内容列表内容2" />
                        <template #action>
                            <t-dropdown :options="options">
                                <div>···</div>
                                <template #prefixIcon="{ item }">
                                    <t-icon :name="item.icon" />

                                </template>
                            </t-dropdown>
                        </template>

                    </t-list-item>
                </t-list>
            </div>
        </div>
        <div class="line"></div>
        <div class="chat">
            <ChatSSE class="chat-sse" />
        </div>
    </div>
</template>
<script setup lang='tsx'>
import { ref } from 'vue';
import ChatSSE from './ChatSSE.vue';
import { DiscountIcon } from 'tdesign-icons-vue-next';
import type { DropdownProps } from 'tdesign-vue-next';
const options: DropdownProps['options'] = ref([
    { content: '置顶', value: 1, icon: 'top' },

    { content: '重命名', value: 2, icon: 'rename' },
    { content: '复制', value: 3, icon: 'copy', },
    { content: '归档', value: 4, icon: 'archive' },
    { content: '分享', value: 5, icon: 'share' },
    { content: '下载', value: 6, icon: 'download' },
    { content: '删除', value: 7, icon: 'delete', }
])
</script>
<style lang='scss' scoped>
.container {
    display: flex;
    height: 100vh;
}

.search {
    padding: 5px;
}

.create-btn {
    width: 95%;
    margin: 5px auto;
}

.left-pannel {
    width: 240px;
}

.line {
    width: 1px;
    height: 100%;
    background-color: #7e7c7c;
}

.chat {
    flex: 1;




}
</style>